<!-- 首页 -->
<template>
  <div>
    <div class="box_top">
      <el-row>
        <el-col :span="8" class="card">
          <div class="center">
            <el-card class="box-card">
              <div class="box-content">
                <!-- 图片 -->
                <div>
                  <svg t="1656638038042" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2263" width="40" height="40">
                    <path
                      d="M258.233 86.657c18.193 0 33.574 6.328 46.26 18.955 12.627 12.656 18.955 28.081 18.955 46.274v110.933c0 18.179-6.328 33.604-18.955 46.26-12.686 12.656-28.066 18.984-46.26 18.984H147.271c-18.164 0-33.574-6.328-46.23-18.984s-18.984-28.081-18.984-46.26V151.887c0-18.193 6.328-33.618 18.984-46.274 12.656-12.627 28.066-18.955 46.23-18.955h110.962v-0.001z m307.603 0c18.163 0 33.589 6.328 46.229 18.955 12.672 12.656 18.984 28.081 18.984 46.274v110.933c0 18.179-6.313 33.604-18.984 46.26-12.641 12.656-28.066 18.984-46.229 18.984H452.911c-18.149 0-33.574-6.328-46.23-18.984s-18.984-28.081-18.984-46.26V151.887c0-18.193 6.328-33.618 18.984-46.274 12.656-12.627 28.081-18.955 46.23-18.955h112.925v-0.001z m303.677 0c18.193 0 33.617 6.328 46.26 18.955 12.656 12.656 18.984 28.081 18.984 46.274v110.933c0 18.179-6.328 33.604-18.984 46.26-12.643 12.656-28.066 18.984-46.26 18.984H756.616c-18.164 0-33.574-6.328-46.23-18.984s-18.984-28.081-18.984-46.26V151.887c0-18.193 6.328-33.618 18.984-46.274 12.656-12.627 28.066-18.955 46.23-18.955h112.897v-0.001z m-611.28 305.655c18.193 0 33.574 6.328 46.26 18.955 12.627 12.656 18.955 28.066 18.955 46.23v110.991c0 18.149-6.328 33.574-18.955 46.23-12.686 12.656-28.066 18.984-46.26 18.984H147.271c-18.164 0-33.574-6.328-46.23-18.984s-18.984-28.081-18.984-46.23V457.497c0-18.164 6.328-33.574 18.984-46.23 12.656-12.627 28.066-18.955 46.23-18.955h110.962z m307.603 0c18.163 0 33.589 6.328 46.229 18.955 12.672 12.656 18.984 28.066 18.984 46.23v110.991c0 18.149-6.313 33.574-18.984 46.23-12.641 12.656-28.066 18.984-46.229 18.984H452.911c-18.149 0-33.574-6.328-46.23-18.984s-18.984-28.081-18.984-46.23V457.497c0-18.164 6.328-33.574 18.984-46.23 12.656-12.627 28.081-18.955 46.23-18.955h112.925z m303.677 0c18.193 0 33.617 6.328 46.26 18.955 12.656 12.656 18.984 28.066 18.984 46.23v110.991c0 18.149-6.328 33.574-18.984 46.23-12.643 12.656-28.066 18.984-46.26 18.984H756.616c-18.164 0-33.574-6.328-46.23-18.984s-18.984-28.081-18.984-46.23V457.497c0-18.164 6.328-33.574 18.984-46.23 12.656-12.627 28.066-18.955 46.23-18.955h112.897z m-611.28 305.639c18.193 0 33.574 6.328 46.26 18.97 12.627 12.671 18.955 28.052 18.955 46.245v110.962c0 18.149-6.328 33.574-18.955 46.23-12.686 12.656-28.066 18.984-46.26 18.984H147.271c-18.164 0-33.574-6.328-46.23-18.984s-18.984-28.081-18.984-46.23V763.166c0-18.193 6.328-33.574 18.984-46.245 12.656-12.642 28.066-18.97 46.23-18.97h110.962z m307.603 0c18.163 0 33.589 6.328 46.229 18.97 12.672 12.671 18.984 28.052 18.984 46.245v110.962c0 18.149-6.313 33.574-18.984 46.23-12.641 12.656-28.066 18.984-46.229 18.984H452.911c-18.149 0-33.574-6.328-46.23-18.984s-18.984-28.081-18.984-46.23V763.166c0-18.193 6.328-33.574 18.984-46.245 12.656-12.642 28.081-18.97 46.23-18.97h112.925z m303.677 0c18.193 0 33.617 6.328 46.26 18.97 12.656 12.671 18.984 28.052 18.984 46.245v110.962c0 18.149-6.328 33.574-18.984 46.23-12.643 12.656-28.066 18.984-46.26 18.984H756.616c-18.164 0-33.574-6.328-46.23-18.984s-18.984-28.081-18.984-46.23V763.166c0-18.193 6.328-33.574 18.984-46.245 12.656-12.642 28.066-18.97 46.23-18.97h112.897z m0 0"
                      fill="#11EEC2" p-id="2264"></path>
                  </svg>
                </div>
                <div class="box-title">
                  <div><b>订单数量</b></div>
                  <vue-count-to :startVal='0' :endVal="goodsCount" :duration="5000"></vue-count-to>
                  <!-- startVal 开始值 endVal 结束值 duration持续时间 -->
                </div>
              </div>
            </el-card>
            <el-card class="box-card">
              <div class="box-content">
                <!-- 图片 -->
                <div>
                  <svg t="1656639320715" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8314" width="40" height="40">
                    <path
                      d="M512.603 2.111C230.604 2.111 1.204 198.522 1.204 439.965c0 132.851 71.961 257.752 197.401 342.835 16.694 11.385 39.412 7.012 50.734-9.701 11.328-16.673 6.982-39.374-9.714-50.685C134.531 651.155 74.26 548.222 74.26 439.965c0-201.197 196.631-364.877 438.34-364.877 241.71 0 438.341 163.681 438.341 364.877 0 201.194-196.631 364.875-438.341 364.875-2.263 0-4.203 0.879-6.354 1.282-17.276-3.103-34.775 5.945-40.838 23.021-7.018 19.813-52.935 53.196-107.47 84.143 19.911-66.377 10.373-80.603 3.984-90.057-7.669-11.38-20.456-18.164-34.156-18.164-20.161 0-36.53 16.306-36.53 36.485 0 6.645 1.755 12.844 4.863 18.206-3.691 20.768-19.653 69.366-37.738 113.842-5.626 13.792-2.267 29.63 8.439 39.992 6.942 6.712 16.109 10.254 25.423 10.254 5.006 0 10.048-1.021 14.831-3.139 41.647-18.534 168.544-78.815 214.163-143.25C799.238 873.441 1024 678.926 1024 439.965 1024.002 198.522 794.605 2.111 512.603 2.111L512.603 2.111zM316.597 371.018c-36.197 0-65.653 29.46-65.653 65.653 0 36.2 29.456 65.655 65.653 65.655 36.196 0 65.654-29.457 65.654-65.655C382.253 400.478 352.793 371.018 316.597 371.018L316.597 371.018zM513.562 371.018c-36.197 0-65.655 29.46-65.655 65.653 0 36.2 29.458 65.655 65.655 65.655 36.196 0 65.652-29.457 65.652-65.655C579.212 400.478 549.756 371.018 513.562 371.018L513.562 371.018zM710.522 371.018c-36.199 0-65.656 29.46-65.656 65.653 0 36.2 29.457 65.655 65.656 65.655 36.191 0 65.652-29.457 65.652-65.655C776.175 400.478 746.716 371.018 710.522 371.018L710.522 371.018z"
                      p-id="8315" fill="#1296db"></path>
                  </svg>
                </div>
                <div class="box-title">
                  <div><b>未发货</b></div>
                  <vueCountTo :startVal='0' :endVal="waitStockCount" :duration="5000"></vueCountTo>
                </div>
              </div>
            </el-card>
          </div>
        </el-col>
        <!-- 订单柱形图 -->
        <el-col :span="16" class="box-col">
          <div id="order">222</div>
        </el-col>
      </el-row>

      <div class="box_bottom">
        <!-- 
          gutter为栅格间隔 
          参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。
          xs	<768px 响应式栅格数或者栅格属性对象	取值number/object (例如： {span: 4, offset: 4})	
          sm	≥768px 响应式栅格数或者栅格属性对象	取值number/object (例如： {span: 4, offset: 4})	
          md	≥992px 响应式栅格数或者栅格属性对象	取值number/object (例如： {span: 4, offset: 4})	
          lg	≥1200px 响应式栅格数或者栅格属性对象	取值number/object (例如： {span: 4, offset: 4})	
          xl	≥1920px 响应式栅格数或者栅格属性对象  取值number/object (例如： {span: 4, offset: 4})
        -->
        <el-row :gutter="10">
          <!--7日成交额折线图 -->
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <div id="make"></div>
          </el-col>
          <!--订单地区分布扇形图 -->
          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
            <div id="district"></div>
          </el-col>
          <!--订单渠道扇形图 -->
          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
            <div id="channel"></div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import Apiadmin from "@/api/admin"
import * as echarts from 'echarts';   //echarts可视化图表
import vueCountTo from "@/components/vue-count-to/src/vue-countTo.vue" // 数字滚动组件
export default {
  components: { vueCountTo },
  data() {
    return {
      goodsCount: 0,   //订单数量
      waitStockCount: 0,   //未发货

    }
  },
  created() {
    this.homeList()
  },
  methods: {
    // 请求数据
    homeList() {
      Apiadmin.dashBoard().then(res => {
        console.log(res)
        if (res.errno == 200) {
          this.goodsCount = res.data.goodsCount  //订单数量
          this.waitStockCount = res.data.waitStockCount  //未发货
          this.homeData(res.data)
        }
      })
    },
    //加载图形
    homeData(data) {
      // 订单柱形图
      var chart = document.getElementById('order');
      var indentChart = echarts.init(chart);
      indentChart.setOption({
        title: {
          text: '7日订单',
          subtext: '订单数',
          left: 'left'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: data.daysOrder[0],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        legend: {   //右上角小图标点击显示隐藏对应的图形,里面的data需要与series中name对应，不然显示不出
          data: ["订单数"],
          orient: 'vertical',
          right: 'right'    //图标的位置
        },
        series: [
          {
            name: '订单数',
            type: 'bar',
            barWidth: '40px',   //柱状图的大小
            data: data.daysOrder[1]
          }
        ]
      });
      //7日成交额折线图
      var chart = document.getElementById('make');
      var turnoverChart = echarts.init(chart);
      turnoverChart.setOption({
        title: {    //左上角标题
          text: '7日成交金额',
          subtext: '订单数',
          left: 'left'
        },
        xAxis: {
          type: 'category',
          data: data.daysSum[0]
        },
        yAxis: {
          type: 'value'
        },
        legend: {   //右上角小图标点击显示隐藏对应的图形,里面的data需要与series中name对应，不然显示不出
          data: ["订单数"],
          orient: 'vertical',
          right: 'right'    //图标的位置
        },
        series: [
          {
            name: "订单数",
            data: data.daysSum[1],
            type: 'line'
          }
        ]
      });
      //订单地区分布扇形图
      var chart = document.getElementById('district');
      var regionChart = echarts.init(chart);
      regionChart.setOption({
        title: {
          text: '订单地区分布',
          left: 'top'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          data: ['地区分布'],
          x: 'right',
          y: 'top',
          itemStyle: {
            color: '#D53A35'
          }
        },
        series: [
          {
            name: '地区分布',
            type: 'pie',
            selectedMode: 'single',     //点击西瓜块脱节
            radius: '65%',      //可调圆大小
            data: data.area,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      });
      //订单渠道扇形图
      var chart = document.getElementById('channel');
      var channelChart = echarts.init(chart);
      channelChart.setOption({
        title: {
          text: '订单渠道分布',
          left: 'left'
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '订单渠道分布',
            type: 'pie',
            selectedMode: 'single',     //点击西瓜块脱节
            radius: '65%',
            data: data.channel,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      });
      //响应屏幕的大小
      window.onresize = function () {  //echarts图表自适应resize用法
        indentChart.resize();
        turnoverChart.resize();
        regionChart.resize();
        channelChart.resize();
      };
    },
  }
}

</script>
<style scoped lang="less">
//媒体查询
@media screen and (max-width: 1285px) {
  .box-title {
    display: none;
  }
}
@media screen and (max-width: 980px) {
  .card {
    display: none;
  }
  .box-col {
    width: 100%;
  }
}
.center {
  padding: 0px 95px;
  box-sizing: border-box;
  .box-card {
    margin-top: 30px;
    border-radius: 5px;
    .box-content {
      display: flex;
      align-items: center;
      justify-content: space-around;
      .box-title {
        text-align: center;
      }
    }
  }
}
#make,
#district,
#channel,
#order {
  width: 100%;
  height: 400px;
}
.box_bottom {
  margin-top: 50px;
}
</style>